import { observer } from 'mobx-react';
import HyperSpeed from './hyperspeed.jsx';

// the component will fill the height/width of its parent container, edit the CSS to change this
// the options below are the default values
import React from 'react';

import useStores from '@s';

function Index() {
  const { globalStore, search } = useStores();
  const { them } = globalStore;

  return (
    <div className="w-screen h-screen">
      <HyperSpeed
        effectOptions={{
          onSpeedUp: () => {},
          onSlowDown: () => {},
          distortion: 'turbulentDistortion',
          length: 400,
          roadWidth: 10,
          islandWidth: 2,
          lanesPerRoad: 3,
          fov: 90,
          fovSpeedUp: 150,
          speedUp: 2,
          carLightsFade: 0.4,
          totalSideLightSticks: 20,
          lightPairsPerRoadWay: 40,
          shoulderLinesWidthPercentage: 0.05,
          brokenLinesWidthPercentage: 0.1,
          brokenLinesLengthPercentage: 0.5,
          lightStickWidth: [0.12, 0.5],
          lightStickHeight: [1.3, 1.7],
          movingAwaySpeed: [60, 80],
          movingCloserSpeed: [-120, -160],
          carLightsLength: [400 * 0.03, 400 * 0.2],
          carLightsRadius: [0.05, 0.14],
          carWidthPercentage: [0.3, 0.5],
          carShiftX: [-0.8, 0.8],
          carFloorSeparation: [0, 5],
          colors: {
            roadColor: them === 'dark' ? 0x16161a : 0xfffffe,
            islandColor: them === 'dark' ? 0x16161a : 0xfffffe,
            background: them === 'dark' ? 0x16161a : 0xfffffe,
            shoulderLines: 0x131318,
            brokenLines: 0x131318,
            leftCars: [0xd856bf, 0x6750a2, 0xc247ac],
            rightCars: [0x03b3c3, 0x0e5ea5, 0x324555],
            sticks: 0x03b3c3,
          },
        }}
      />
    </div>
  );
}

export default observer(Index);
